<template>
  <PaginatedGrid
    :items="products"
    :min-item-width="200"
    :gap="16"
    :container-padding="24"
    :rows-per-page="3"
    @page-change="handlePageChange"
    @page-size-change="handlePageSizeChange"
  >
    <template #item="{ item, itemsPerRow, containerWidth }">
      <ProductCard
        :product="item"
        :items-per-row="itemsPerRow"
        :container-width="containerWidth"
      />
    </template>
  </PaginatedGrid>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import PaginatedGrid from "./components/PaginatedGrid.vue";
import ProductCard from "./components/ProductCard.vue";

interface Product {
  id: number;
  name: string;
  price: number;
  image: string;
}

const products = ref<Product[]>([]);

// 模拟API调用
const fetchProducts = async () => {
  // 这里实际调用接口时，可以使用计算出的pageSize
  // const response = await api.getProducts({ page, pageSize })

  // 模拟数据
  products.value = Array.from({ length: 50 }, (_, i) => ({
    id: i + 1,
    name: `产品 ${i + 1}`,
    price: Math.random() * 1000,
    image: `https://picsum.photos/200/200?random=${i}`,
  }));
};

const handlePageChange = (page: number, pageSize: number) => {
  console.log("页面变化:", page, "每页数量:", pageSize);
  // 这里可以调用API获取对应页面的数据
};

const handlePageSizeChange = (pageSize: number) => {
  console.log("每页数量变化:", pageSize);
  // 当窗口大小改变导致每行元素数量变化时，可以重新调用API
};

onMounted(() => {
  fetchProducts();
});
</script>
